<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情页2</title>
    <style>
        ul,
        li {
            list-style: none;
        }
        
        ul {
            display: flex;
            border: 1px solid red;
            justify-content: space-evenly;
            padding: 10px 0;
        }
        
        ul li {
            width: 24%;
            border: 1px solid #ccc;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px 0;
            cursor: pointer;
        }
        
        ul li img {
            width: 90%;
        }
        
        ul li p {
            width: 90%;
            margin: 5px;
        }
    </style>
</head>


<body>
    <ul id="goods">
        <!-- <li class="goods1"><img src="../images/g1.jpg">
            <p>姓名：阿联酋美女1号</p>
            <p>价格：20</p>
            <p>年龄：20</p>
        </li> -->
    </ul>
    <script>
        // 相当于数据库的数据
        var goodlist = [{
                    id: 111,
                    url: './images/g1.jpg',
                    name: '阿联酋美女1号',
                    price: 1998,
                    age: 20
                }, {
                    id: 1,
                    url: './images/g2.jpg',
                    name: '阿联酋美女2号',
                    price: 98,
                    age: 18
                }, {
                    id: 2,
                    url: './images/g3.jpg',
                    name: '阿联酋美女3号',
                    price: 998,
                    age: 22
                }, {
                    id: 3,
                    url: './images/g4.jpg',
                    name: '阿联酋美女4号',
                    price: 9.8,
                    age: 24
                }, {
                    id: 4,
                    url: './images/g3.jpg',
                    name: '阿联酋美女5号',
                    price: 9888,
                    age: 18
                }

            ]
            // locatio.searcj把？后面的所有数据都获取
        var p = location.search;
        // 截取substring(1)从第2个索引开始截取只有一个值时就是截取到最后
        var q = p.substring(1);
        // 我们要在等号哪里开始分割字符串
        var arr = q.split('=');
        // 创建对象
        var obj = {}
            // 利用中括号语法操作对象  arr的  arr[0]表示索引为0也就是id
            // arr[1]就索引为1也就是1   意思是id的属性值是1
        obj[arr[0]] = arr[1];
        // 列表id值要等于对象中的属性值
        var res = goodlist.filter(function(itme, index) {
            return itme.id == obj.id
        })
        res.forEach(function(item, index) {

            // 把id的值添加到li标签idx的值
            goods.innerHTML +=
                '<li idx ="' +
                item.id +
                '"  class=" goods1 "><img src="' +
                item.url +
                '">' +
                "<p> 姓名：" +
                item.name +
                "</p>" +
                "<p>价格:" +
                item.price +
                "</p>" +
                "<p>年龄:" +
                item.age +
                "</P>" +
                "</li>";
        });
    </script>
</body>

</html>